<template>
	<view>
		<nav-bar title="我的IC卡"></nav-bar>
		<view :style="{'margin-top':navHeight+'px'}">
			<view class="cell"  v-for="(item,index) in cardList" :key="item.id">
				<image class="bg" src="../../static/myIC_bg_03@2x.png"></image>
				<view class="content">
					<view class="num">卡号：{{item.cardNo}}</view>
					<view class="time">绑卡时间：{{item.createDate}}</view>
					<view class="btn" @click="unbindingClick(item)">解除绑定</view>
				</view>
			</view>
		</view>
		<u-empty :show="showEmpty" :marginTop="emptyTop">
		</u-empty>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import * as cardApi from '@/api/user/card.js'
	export default{
		components:{navBar},
		data(){
			return{
				navHeight:0,
				cardList:[],
				showEmpty:false,
				emptyTop:200
			}
		},
		onLoad() {
			this.navHeight = globalData.titleHeight;
			this.getCardList();
		},
		methods:{
			getCardList(){
				cardApi.getCardList().then((res) => {	
					if (res.code == 0) {		
						this.cardList = res.data
						this.showEmpty=this.cardList.length==0?true:false
					}		
				}).catch((errMsg) => {
				
				})
			},
			unbindingClick(item){
				let _this=this
				uni.showModal({
					title:'提示',
					content:'确定解除绑定该卡？',
					success(res) {
						if(res.confirm){
							_this.unbindingCard(item.id)
						}	
					}
				})
				
			},
			
			unbindingCard(id){
				cardApi.unbingdingCard(id).then((res) => {
					console.log("解绑成功")
					if (res.code == 0) {	
						uni.showToast({
							title:'解绑成功'
						})
						this.getCardList()
					}		
				}).catch((errMsg) => {
				
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.cell{
		position: relative;
		height:276rpx;
	}
	.bg{
		height:276rpx;
		width:100%;
	}
	.content{
		position: absolute;
		top:13rpx;
		bottom:26rpx;
		left:250rpx;
		right:18rpx;
		border-radius:20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.num{
		color:#FFFFFF;
		font-size:32rpx;
		font-weight: bold;
	}
	.time{
		color:#FFFFFF;
		font-size:24rpx;
		margin-top:34rpx;
	}
	.btn{
		position: absolute;
		top:0rpx;
		right:-4rpx;
		width:168rpx;
		height:60rpx;
		line-height:60rpx;
		background-color:rgba(255, 255, 255,0.25);
		color: #fff;
		font-size:24rpx;
		text-align: center;
		border-top-right-radius:20rpx;
		border-bottom-left-radius:20rpx;
	}
</style>